<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <script src="js/vue.js"></script>
  <script src="js/axios.min.js"></script>
  <link rel="stylesheet" href="ele-2.15.7/theme-chalk/index.css">
  <script src="ele-2.15.7/index.js"></script>
  <script src="js/jquery-1.9.0.js"></script>
  <link href="https://cdn.bootcss.com/animate.css/3.7.2/animate.min.css" rel="stylesheet">
  <title></title>
  <link rel="stylesheet" type="text/css" href="css/index-z.css" />
  <!--跑马灯标题-->
  <script type="text/javascript">
    var str="ThreeGays(中国)-官方网站 (欢迎你)"; // title
    // 跑马灯标题
    function run(){
      str=str.substring(1,str.length)+str.substring(0,1);
      document.title=str;  // 在标题栏显示
      window.status=str;  // 在状态栏显示
      //setTimeout(run,300);
    }
    //run();
    window.setInterval("run()",300); //每隔0.3每分钟调用run()方法一次
  </script>
</head>
<body>
<!--主页面-->
<div id="app">
  <!--    固定的menu-->
  <div id="header" class="head-one">
    <a class="logoname">ThreeGays</a>
    <i  class="el-icon-user"
        style="margin-right: 20px;"></i>
    <i  class="el-icon-shopping-cart-1"></i>'
    <!--        <div style=""></div>-->
    <i class="el-icon-search" @click="show0 =!show0,show00=false"></i>
    <transition name="el-zoom-in-center">
      <div class="search"
           @click="show0=true,show00=!show00" v-show="show0">
        <input type="text" class="search-ipt" placeholder="探索新世界"/>
      </div>
    </transition>
  </div>
  <!--    顶部底色-->
  <div class="top"></div>
  <!--    搜索menu-->
  <transition name="el-zoom-in-top">
    <div v-show="show00" class="menudiv0" @click="show00=false,show0=false">
      <ul>
        <li style="font-size: 10px;font-weight: lighter; color: #828282 ">热门搜索</li>
        <li><i  class="el-icon-right"></i><a href="">HUAWEI P60 Art</a></li>
        <li><i  class="el-icon-right"></i><a href="">iPhone14 Pro Max</a></li>
        <li><i  class="el-icon-right"></i><a href="">AirPods Pro</a></li>
        <li><i  class="el-icon-right"></i><a @click="show2 = true,show00=false">phone</a></li>
        <li><i  class="el-icon-right"></i><a href="">配件</a></li>
      </ul>
    </div>
  </transition>

</div>
<!--js-->
<script type="text/javascript">


</script>
<!--vue-->
<script>
  var v = new Vue({
    el : "#app",
    data : {
      show00 : false,
      show0: false,
      show1: false,
      show2: false,
      show3: false,
      show4: false,
      show5: false
    }
  })
</script>

</body>
</html>

<!--基础css-->
<style>
  #app{
    width: 100%;
  }
  .el-header{
    height: 40px;
  }
  .containter{
    height: 1000px;
    width: 100%;
    background-color: black;
  }
  .footer {
    height: 100px;
    width: 100%;
    background-color: #ddd;
  }

</style>